<template>
  <view>
    <view v-for="(item, index) in jdata" :key="index" class="major-infor">
        <view class="btn-area consult-btn">
            <button class="btn btn-phone click_open_layer" @click="open({
								type:'changePrice',
								msg:'获取变价通知',
								title:'联系咨询师',
								text:'价格变动这么快？！联系咨询师，涨价降价我们将第一时间通知您，帮您找准买房时机！'
							})">免费咨询</button>
        </view>

        <view class="face">
            <!-- <img src="@/static/img00/care.png" alt=""/> -->
            <img :src="item.image"/>
            <view class="best_remark">
                <span class="best_remark2 m-icon-bg1"></span>
            </view>
        </view>

        <view class="text">    
            <view class="cmt-name">
                    <b>{{item.name}}</b>
                    <span v-for="(item2, index2) in item.type_arr" >{{item2}}</span>
            </view>
            <view class="cmt-tit">
                <p>累计服务客户<span>{{item.clients}}</span>人</p>
            </view>
        </view>
    </view>

        <uni-popup ref="popup" type="center">
		    <view class="pop-content">
		        <view  class="pop-bohu">
		            <view @click="close()" class="pop-shut">
						<img />
					</view>
		
		            <view class="pop-title">{{pop_title}}</view>
		
		            <p class="pop-text">{{pop_text}}</p>
		
		            <view class="pop-phone">
		                <input @input="onKeyInput2" :value="mobile" type="text" placeholder="请输入订阅手机号">
		            </view>
		
		            <button class="pop-btn-area"  @click="expert">确定</button>
		        </view> 
		    </view>   
		</uni-popup> 
		
		<uni-popup ref="message" type="center">
		    <view class="pop-expert2-popup">
		        <p class="pop-expert2-popup-p">请输入正确格式的手机号</p>
		        <p @click="close1()" class="pop-expert2-popup-shut">取消</p>
		    </view>
		</uni-popup>
        
  </view>    
</template>

<script>
export default {
  data() {
    return {
        pop_title:'',
		pop_text:'',
		param:{},
		mobile:'',
		is_all_show:0,//富文本是否全部显示1=是，0=否
		// imageList:[]
    };
  },

    props: {
		jdata:{
			// type: Array,
			required: true,
		}
    },
  methods: {
    open(data){
			// console.log(data);
			this.pop_title = data.title;
			this.pop_text = data.text;
			this.param ={
				'type': data.type,
				'msg': data.msg,
				'loupan_id': this.loupan_id
			};
			    this.$refs.popup.open();
            },
     close(){
	       this.$refs.popup.close()
	  },
	  
	  close1(){
	      this.$refs.message.close()
	  },
    expert(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				this.param.loupan_res = this.info;
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
						if(_this.param.type == 'liangdian'){
							_this.is_all_show = 1;
						}
						_this.$refs.popup.close()
					}
				);
				
				
			    // this.$refs.message.open()
			},
  },
};
</script>

<style scoped>
    .major-infor{
        padding-bottom: 56upx;
    }
    .btn-area{
        float: right;
    }
    .btn{
        width: 154upx;
        height: 56upx;
        background: #13c3c3;
        color: #fff;
        font-size: 24upx;
        border-radius: 10upx;
    }

    .face{
        height: 80upx;
        width: 80upx;
        float: left;
    }
    .face>img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
    .text{
        margin-left: 100upx;
    }
    .cmt-name>b{
        color: #3e4a59;
    }
   .cmt-name>span{
       padding: 5upx 10upx;
       color: #13c3c3;
       background: #e3f6fe;
       font-size: 24rpx;
       border-radius: 5upx;
       margin-left: 20upx;
   }
   .cmt-tit>p{
       color: #77808a;
       font-size: 24upx;
       margin-top: 8upx;
   }
   .cmt-tit>p>span{
        color: #fa5f35;
        margin: 0 5upx 0 5upx;
   }

   /* 弹框 */
   .pop-shut{
	    height: 32upx;
	    width: 32upx;
	    position: relative;
	    top:-30upx;
	    left: 98%;
	    /* background: url("../../../static/img00/shut.png") no-repeat; */
	    background-size: 100% 100%;
         z-index: 100;
	}
	.pop-shut>img{
		width: 100%;
		height: 100%;
	}
	
	.pop-content{
	    /* margin-left: 8%;
	    margin-right: 8%; */
        margin: 0 auto;
	    background: #fff;
	    border-radius: 10upx;
	    display: flex;
		width:600upx;
       
	}
	.pop-bohu{
	    padding: 50upx 60upx 50upx 60upx;
	    margin: 0 auto;
	    align-self: center;
		
	}
	
	.pop-title{
	    font-size: 40upx;
	    font-weight: 550;
	    color: #3e4a59;
	    text-align: center;
	}
	.pop-text{
	    margin:30upx 0 50upx 0;
	    text-align: center;
		color: #000000;
		line-height: 60rpx;
		font-weight: 500;
	}
	.pop-phone{
	    border: 1upx solid #cdd7e1;
	    border-radius: 10upx;
	}
	.pop-phone>input{
	    padding: 0 30upx;
		color: #000000;
		font-weight: 500;
		border:1px solid #CCCCCC;
	}
	input{
	    height: 86upx;
	}
	.pop-btn-area{
	    margin-top: 30upx;
	    background: #13c3c3;
	    color: #fff;
	}
	
	.pop-expert2-popup{
	    width: 510upx;
	    height: 240upx;
	    background: #fff;
	    border-radius: 10upx;
	}
	.pop-expert2-popup-p{
	    height: 150upx;
	    text-align: center;
	    font-size: 28uxp;
	    color: #3e4a59;
	    line-height: 150upx;
	    border-bottom: 1upx solid rgb(195, 195, 195);
	}
	.pop-expert2-popup-shut{
	    text-align: center;
	    line-height: 90upx;
	    color: #47b3e3;
	}
	
</style>
